<template>
    <div class="contt">
        <li>
            <img src="../assets/img/Waterdeep.png" alt="" width="40" style="vertical-align: middle;"><br>
            <span>{{ deep.toFixed(1) }}m</span>
        </li>
        <li>
            <br>
            <img src="../assets/img/big-cam.png" alt="" width="34" v-if="cam1">
            <img src="../assets/img/double-cam.png" alt="" width="34" v-else>
        </li>
        <li>
            <br>
            <img src="../assets/img/deng-on.png" alt="" width="34" v-if="deng">
            <img src="../assets/img/deng-off.png" alt="" width="34" v-else>
        </li>
    </div>
</template>


<script setup>
    import {ref} from 'vue'

    const props = defineProps({
        cam1:{
            type: Boolean,
            default: true
        },
        deep:{
            type: Number,
            default: 0.0
        },
        deng:{
            type: Boolean,
            default: false
        }
    })

    //const deng   = ref(true)

    // setInterval(()=>{
    //     props.deng = !props.deng
    // },3000)
</script>



<style scoped>
.contt{
    color: aqua;
    list-style: none;
    background-color: rgba(78,78,78,0.4);
    border-radius: 0.4em;
    box-shadow: 0px 0px 10px rgba(78,78,78,0.7);
}
</style>